﻿@using BookShop.Library.Constant
@{
    ViewBag.Title = "Liên hệ | Book Shop Ngân Hà";
}

<ul class="breadcrumb">
    <li><a href="@Url.Action("Index", "Home")">Trang chủ</a></li>
    <li class="active">Liên hệ</li>
</ul>

<div class="row margin-bottom-40">
    <!-- BEGIN CONTENT -->
    <div class="col-md-12">
        <h1>Liên hệ</h1>
        <div class="content-page">
            <div class="row">
                <div class="col-md-12">
                    <div id="map" class="gmaps margin-bottom-40" style="height: 400px;"></div>
                </div>
                <div class="col-md-9 col-sm-9">
                    <h2>Liên hệ, góp ý</h2>
                    <p>BookShop Ngân Hà luôn trân trọng và đón nhận mọi góp ý của bạn. Bằng cách sử dụng form gửi email bên dưới, lời nhắn của bạn sẽ được gửi đến bộ phận chuyên trách.</p>

                    <!-- BEGIN FORM-->
                    <form action="@Url.Action("ContactUs")" id="contact-us-form" method="POST" role="form">
                        <div class="alert alert-danger display-hide" style="display: none;">
                            <button class="close" data-close="alert"></button>
                            @AlertMessage.InvalidInput
                        </div>
                        <div class="form-group">
                            <label for="contacts-name">Họ và tên</label>
                            <input type="text" class="form-control" id="contacts-name" name="fullName">
                        </div>
                        <div class="form-group">
                            <label for="contacts-email">Email <span class="required">*</span></label>
                            <input type="email" class="form-control" id="contacts-email" name="email">
                            <span class="help-block" for="contacts-email"></span>
                        </div>
                        <div class="form-group">
                            <label for="contacts-message">Tin nhắn <span class="required">*</span></label>
                            <textarea class="form-control" rows="5" id="contacts-message" name="message"></textarea>
                            <span class="help-block" for="contacts-message"></span>
                        </div>
                        <button type="button" id="btn-cancel" class="btn btn-default pull-right">Hủy</button>
                        <button type="submit" class="btn btn-primary pull-right" style="margin-right: 10px;"><i class="icon-ok"></i>Gửi</button>
                    </form>
                    <!-- END FORM-->
                </div>
                <div class="col-md-3 col-sm-3 sidebar2">
                    <h2>Thông tin liên hệ</h2>
                    <address class="margin-bottom-40">
                        Trường Đại học Bách Khoa Hà Nội<br />
                        Số 1, Đại Cồ Việt, Hai Bà Trưng<br>
                        Hà Nội, Việt Nam<br>
                        Phone: 0974336764<br>
                        Email: <a href="mailto:milkriver311@gmail.com">milkriver311@gmail.com</a><br>
                        Skype: <a href="skype:milkriver311?chat">milkriver311</a>
                    </address>
                    <ul class="social-icons margin-bottom-40">
                        <li><a href="https://www.facebook.com/silver.river.52" data-original-title="facebook" class="facebook"></a></li>
                        <li><a href="https://plus.google.com/u/0/101296049685617402624/posts" data-original-title="Goole Plus" class="googleplus"></a></li>
                        <li><a href="http://vn.linkedin.com/pub/ngan-ha-nguyen/ab/173/5a" data-original-title="linkedin" class="linkedin"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- END CONTENT -->
</div>

@section Javascript{
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/gmaps/gmaps.js" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/jquery-validation/js/jquery.validate.min.js")"></script>
    <script type="text/javascript">
        var map;
        $(document).ready(function () {
            map = new GMaps({
                div: '#map',
                lat: 21.00600,
                lng: 105.84297,
            });
            var marker = map.addMarker({
                lat: 21.00600,
                lng: 105.84297,
                title: 'Loop, Inc.',
                infoWindow: {
                    content: "<b>Trường Đại học Bách Khoa Hà Nội</b> Số 1, Đại Cồ Việt<br>Hai Bà Trưng, Hà Nội"
                }
            });
            marker.infoWindow.open(map, marker);
            $('#btn-cancel').click(function () {
                $('#fullName').val('');
                $('#email').val('');
                $('#username').val('');
                $('#password').val('');
                $('#confirm_password').val('');
            });
        });
        function validateAdd() {
            var form1 = $('#contact-us-form');
            var error = $('.alert-danger', form1);
            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    email: {
                        required: true
                    },
                    message: {
                        required: true
                    }
                },
                invalidHandler: function () {
                    error.show();
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    error.hide();
                    form.submit();
                }
            });
        }
    </script>
}
